<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>城市信息管理</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" th:href="@{/bower_components/bootstrap/dist/css/bootstrap.min.css}">
  <!-- Font Awesome -->
  <link rel="stylesheet" th:href="@{/bower_components/font-awesome/css/font-awesome.min.css}">
  <!-- Ionicons -->
  <link rel="stylesheet" th:href="@{/bower_components/Ionicons/css/ionicons.min.css}">
  <!-- DataTables -->
  <link rel="stylesheet" th:href="@{/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/bower_components/select2/dist/css/select2.min.css}" />
  <!-- Theme style -->
  <link rel="stylesheet" th:href="@{/dist/css/AdminLTE.min.css}">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" th:href="@{/dist/css/skins/_all-skins.min.css}">

</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">

  <div th:replace="/common/header :: header"></div>

  <!-- Left side column. contains the logo and sidebar -->

  <div th:replace="/common/aside :: aside"></div>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="row">
        <div class="col-md-6">
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li class="active"></li>
          </ol>
        </div>
      </div>
    </section>
    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">酒店房间数据</h3>
              <br>
              <select class="form-control select2" name="cityName" id="cityName" data-placeholder="请选择城市">
              </select>
              <br>
              <select class="form-control select2" name="hotelName" id="hotelName" data-placeholder="请选择酒店">
              </select>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="mytable" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>所属城市</th>
                  <th>所属酒店</th>
                  <th>房间类型</th>
                  <th>房间数量</th>
                  <th>房间单价</th>
                  <th>上传图片</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="h:${hotels}">
                  <td th:text="${h.cityName}"></td>
                  <td th:text="${h.hotelName}"></td>
                  <td th:text="${h.roomType}"></td>
                  <td th:text="${h.roomCount}"></td>
                  <td th:text="${h.roomPrice}"></td>
                  <td >
                    <form  class="uploadForm" enctype="multipart/form-data" method="post">
                      <input type="file"  id="uploadPic"  class="uploadPic">
                      <input hidden="hidden" th:value="${h.roomId}" class="upload">
                    </form>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <div th:replace="/common/footer :: footer"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script th:src="@{/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- DataTables -->
<script th:src="@{/bower_components/datatables.net/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{/bower_components/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/bower_components/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/dist/js/adminlte.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/dist/js/demo.js}"></script>
<script th:src="@{/bower_components/select2/dist/js/select2.full.min.js}"></script>
<!-- page script -->
<script>
    $(function () {
        $('#mytable').DataTable({
            "language": {
                "lengthMenu": "每页 _MENU_ 条记录",
                "zeroRecords": "没有找到记录",
                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "search": "快速检索: ",
                "oPaginate": {
                    "sPrevious": "上页",
                    "sNext": "下页"
                }
            }

        })


        $('#hotelName').change(function () {
            var cityId = $('#cityName').val();
            var hotelId = $(this).val();

            window.location.href = "/hotel/hotelRoomData?cityId=" + cityId + "&hotelId=" + hotelId;
        })

        $('.uploadPic').on('change', function () {
            var id = $(this).next().val();
            // debugger;
            var formData = new FormData($(this).parent())  //创建一个forData
            formData.append('id', id); //把file添加进去  name命名为img
            formData.append('file', $(this)[0].files[0]) //把file添加进去  name命名为img
            alert(id);
            $.ajax({
                url: '/hotel/uploadRoomPic',
                type: 'post',
                dataType: 'json',
                // 告诉jQuery不要去处理发送的数据
                processData : false,
                // 告诉jQuery不要去设置Content-Type请求头
                contentType : false,
                data:formData,
                success: function (result) {
                    if ("ok"==result.data()){
                        alert("ok");
                    }

                }
            })
        })


    })
    window.onload = function () {

        $.ajax({
            async: true,
            type: "POST",
            url: "/city/findAllCity",
            dataType: "json",
            data: {
                // warehouse: $("#cityName").val(),   //'选择框id'
            },
            success: function (data) {

                console.log(data);
                $("#cityName").append("<option >" + '请选择城市名称' + "</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#cityName").append("<option value=" + data[i].cityId + ">" + data[i].cityName + "</option>");
                }
            }
        });


        $('#cityName').change(function () {
            var cityId = $('#cityName').val();
            $.ajax({
                async: true,
                type: "POST",
                url: "/hotel/findAllHotelName?cityId=" + cityId,
                dataType: "json",
                data: {
                    warehouse: $("#hotelName").val(),   //'选择框id'
                },
                success: function (data) {

                    var hotels = $('#hotelName option');
                    if (hotels.length > 0) {
                        for (var i = 0; i < hotels.length; i++)
                            hotels[i].remove();
                    }
                    console.log(data);
                    $("#hotelName").append("<option >" + '请选择酒店名称' + "</option>");
                    for (var i = 0; i < data.length; i++) {
                        $("#hotelName").append("<option value=" + data[i].hotelId + ">" + data[i].hotelName + "</option>");

                    }
                }
            });
        })


        $(function () {
            if ($('#login').text() == "登录") {
                layer.alert("请重新登录");
                window.location.href = "/";
            }
        })
    }
</script>


</body>
</html>
